<template>
    <view class="switch">
        <view class="switch-item">
            <view class="switch-title">音乐</view>
            <button class="btn-reset btn-small btn-square plain" @click="change(13)">开/关</button>
        </view>
        <view class="switch-item">
            <view class="switch-title">弹幕</view>
            <button class="btn-reset btn-small btn-square plain" @click="change(11)">开/关</button>
        </view>
        <!-- <view class="switch-item">
            <view class="switch-title">祝福榜</view>
            <button class="btn-reset btn-small btn-square plain" @click="change(10)">开/关</button>
        </view> -->
        <view class="switch-item">
            <view class="switch-title">二维码</view>
            <button class="btn-reset btn-small btn-square plain" @click="change(12)">开/关</button>
        </view>
    </view>
</template>

<script>
export default {
    methods: {
        change(val) {
            this.$emit("changeSwitch", val)
        }
    }
}
</script>

<style lang="scss" scoped>
.switch {
    &-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding: 20rpx 30rpx;
        &:not(:last-child):after {
            @include _border;
            border-color: #4ea0e7;
        }
    }
    &-title {
        font-size: 32rpx;
        color: #333;
    }
}
</style>
